<template>
	<view>
		<dsl-navbar title="奖励中心" isBack bgTopImg="white"></dsl-navbar>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="award_image">
			<swiper-item v-for="(item,index) in 3" class="award_image">
				<image src="/static/ces.jpg" mode="aspectFill" class="award_image"></image>
			</swiper-item>
		</swiper>
		<view class="rowsb padding">
			<view class="vip_body1 text-center" @click="postDiamond()">
				<view class="text-lg padding-top-sm text-bold">VIP领钻石</view>
				<view class="text-sm margin-top-xs">开通会员，每天领取{{vipDiamond ||0}}钻石</view>
			</view>
			<view class="vip_body2 text-center" @click="$tools.push('/pages/user/modules/vip')">
				<view class="text-lg padding-top-sm text-bold">VIP领钻石</view>
				<view class="text-sm margin-top-xs">开通会员，每天领取{{vipDiamond ||0}}钻石</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		onReady() {},
		onLoad() {
			this.vipDiamondSetting() //领取钻石数量展示
		},
		onShow() {},
		methods: {
			/**
			 * vipDiamondSetting 领取钻石展示
			 * postDiamond 领取钻石
			 */
			...mapActions('money', ['vipDiamondSetting','postDiamond']),
		},
		computed: {
			...mapState('money', ['vipDiamond']),
		},
		components: {},
	}
</script>

<style>
	.award_image {
		width: 750rpx;
		height: 250rpx;
		background: #EDEEF3;
		opacity: 1;
	}

	.vip_body1 {
		background-image: url(/static/user/modules/award/imglingqu.png);
		width: 330rpx;
		height: 178rpx;
		background-size: 100% 100%;
		color: #C87910;
	}

	.vip_body2 {
		background-image: url(/static/user/modules/award/imgyaoqing-2.png);
		width: 330rpx;
		height: 178rpx;
		background-size: 100% 100%;
		color: #7B6885;
	}
</style>
